import React, { Component } from 'react'
import styles from "./index.module.css"
import BtnFoot from "../../../../components/BtnFoot"
export default class FilterMore extends Component {
    state = {
        selectedValues: this.props.defaultValue,
    }
    onTagClick(value) {
        const { selectedValues } = this.state
        //创建新数组
        const newSelectedValues = [...selectedValues]
        if (selectedValues.indexOf(value) <= -1) {
            // 没有当前项
            newSelectedValues.push(value)
        } else {
            // 有
            // 拿到有的当前项下标
            const index = newSelectedValues.findIndex(item => item === value)
            // 删除掉
            newSelectedValues.splice(index, 1)

        }
        // console.log(value)
        this.setState({
            selectedValues: newSelectedValues
        })
    }
    // 渲染标签
    renderFilter(data) {
        const { selectedValues } = this.state
        return data.map(item => {
            const isSelected = selectedValues.indexOf(item.value) > -1
            return (
                <span
                    key={item.value}
                    className={isSelected ? styles.active : styles.tag}
                    onClick={() => {
                        this.onTagClick(item.value)
                    }}
                >
                    {item.label}
                </span>
            )
        })
    }
    // 清除按钮事件
    onClear = () => {
        if (this.state.selectedValues.length > 0) {
            this.setState({ selectedValues: [] })
        }
    }
    // 确定按钮事件
    onEnter = () => {
        const { onEnter, type } = this.props
        // 这个onEnter方法是父组件的传过来的方法
        onEnter(type, this.state.selectedValues)
    }
    render() {
        const {
            data: { roomType, oriented, floor, characteristic }, onCancel, type
        } = this.props
        return (
            <div className={styles.more}>
                {/* 遮罩层 */}
                {/* <div className={styles.mask}></div> */}
                {/* 条件内容 */}
                <div className={styles.tags}>
                    <dl className={styles.dl}>
                        {/* 户型 */}
                        <dt className={styles.maindt}>户型</dt>
                        <dd className={styles.dd}>{this.renderFilter(roomType)}</dd>
                        {/* 朝向 */}
                        <dt className={styles.dt}>朝向</dt>
                        <dd className={styles.dd}>{this.renderFilter(oriented)}</dd>
                        {/* 楼层 */}
                        <dt className={styles.dt}>楼层</dt>
                        <dd className={styles.dd}>{this.renderFilter(floor)}</dd>
                        {/* 房屋亮点 */}
                        <dt className={styles.dt}>房屋亮点</dt>
                        <dd className={styles.dd}>{this.renderFilter(characteristic)}</dd>
                    </dl>
                </div>

                <BtnFoot onCancel={() => onCancel(type)} onEnter={this.onEnter} isShow={true} onClear={this.onClear} />
            </div>
        )
    }
}
